<!--礼卡报表页面-->
<template>
<el-row class="container">

    <el-col :span="24" style="min-height:60px;height:5%;background-color: #014171;">
        <el-row>
            <el-col :span="10">
                <div class="logo">
                    <el-button type="primary" icon="el-icon-back" @click="showMainPage">&nbsp;&nbsp;{{$t("appointment.returnBtnName")}}&nbsp;&nbsp;</el-button>
                </div>
            </el-col>
            <el-col :span="14">
            </el-col>
        </el-row>
    </el-col>

    <el-col :span="24" style="height:95%;margin-top:50px;padding-left:20px;padding-right:20px;">
        <!--列表(查询结果-当前页)-->
        <el-table :data="giftcards" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;" stripe border>
            <el-table-column type="index" :index="indexMethod" :label="$t('giftcard.route.cardReport.table.xuhao')" width="150" sortable>
            </el-table-column>
            <el-table-column prop="cardNo" :label="$t('giftcard.route.cardReport.table.cardnum')" min-width="200" sortable>
            </el-table-column>
            <el-table-column prop="clientName" :label="$t('giftcard.route.cardReport.table.realname')" min-width="200" sortable>
            </el-table-column>
            <el-table-column prop="orginMoney" :label="$t('giftcard.route.cardReport.table.orginmoney')" min-width="200" sortable>
            </el-table-column>
            <el-table-column prop="balanceMoney" :label="$t('giftcard.route.cardReport.table.balance')" min-width="200" sortable>
            </el-table-column>
            <el-table-column :label="$t('giftcard.route.cardReport.table.payway')" min-width="200" sortable>
                <template scope="scope">
                    {{formatPayWay(scope.row)}}
                </template>
            </el-table-column>
            <el-table-column prop="addTime" :label="$t('giftcard.route.cardReport.table.paytime')" min-width="200" sortable>
            </el-table-column>
            <el-table-column :label="$t('giftcard.route.cardReport.table.edit')" width="80">
                <template scope="scope">
                    <el-button type="primary" icon="delete" size="small" @click="handleEditEnvent(scope.$index, scope.row)">{{$t("giftcard.route.cardReport.table.edit")}}</el-button>
                </template>
            </el-table-column>
            <el-table-column :label="$t('giftcard.route.cardReport.table.consumerecord')" width="100">
                <template scope="scope">
                    <el-button type="success" icon="delete" size="small" @click="handleConsumeRecordEnvent(scope.$index, scope.row)">{{$t("giftcard.route.cardReport.table.consumerecord")}}</el-button>
                </template>
            </el-table-column>
            <el-table-column :label="$t('giftcard.route.cardReport.table.delete')" width="80">
                <template scope="scope" v-if="scope.row.balanceMoney == scope.row.orginMoney || scope.row.balanceMoney == 0">
                    <!-- //礼卡余额等于初始面值或者礼卡余额等于0时候才可以删除 -->
                    <el-button type="danger" icon="delete" size="small" @click="handleDelEnvent(scope.$index, scope.row)">{{$t("giftcard.route.cardReport.table.delete")}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-col :span="24" class="toolbar">
            <el-col :span="2" style="color:gray;">
                卡片数量：
            </el-col>
            <el-col :span="2" style="color:gray;">
                {{total}}
            </el-col>
            <el-col :span="2" style="color:gray;">
                礼卡总余额：
            </el-col>
            <el-col :span="2" style="color:gray;">
                ${{balance}}
            </el-col>
            <el-col :span="16">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;">
                </el-pagination>
            </el-col>
        </el-col>
    </el-col>
    <giftcardPayrecord ref="giftcardPayrecord"></giftcardPayrecord>
    <!--修改礼卡界面-->
    <el-dialog :title="$t('giftcard.route.cardReport.editCardDialog.title')" :visible.sync="editDialogFormVisible" width="300" @close="closeEditFormDialog">
        <el-form label-position="right" label-width="120px" ref="editForm" :model="editForm" :rules="editFormRules">
            <el-form-item :label="$t('giftcard.route.cardReport.editCardDialog.form.cardNo')">
                <el-input v-model="editForm.cardNo" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item :label="$t('giftcard.route.cardReport.editCardDialog.form.clientName')">
                <el-col :span="12">
                    <el-input v-model="editForm.clientFirstName" :placeholder="$t('giftcard.route.cardReport.editCardDialog.form.clientNameFirstName')" style="width: 100%;"></el-input>
                </el-col>
                <el-col :span="12">
                    <el-input v-model="editForm.clientFamilyName" :placeholder="$t('giftcard.route.cardReport.editCardDialog.form.clientNameFamilyName')" style="width: 100%;"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item :label="$t('giftcard.route.cardReport.editCardDialog.form.clientPhone')" prop="clientPhone">
                <el-input v-model="editForm.clientPhone"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeEditFormDialog">{{$t("setting.route.shopSetDialog.dialogCancel")}}</el-button>
            <el-button type="primary" @click="editCardEvent">{{$t("setting.route.shopSetDialog.dialogOk")}}</el-button>
        </div>
    </el-dialog>
</el-row>
</template>

<script>
import GiftcardPayrecord from '../../components/giftcardPayrecord.vue';
import {
    getShopGiftcards,
    delGiftcard,
    editGiftcard,
    getShopGiftcardBalance,
    getGiftcardDetail
} from '../../api/api';
export default {
    components: {
        giftcardPayrecord: GiftcardPayrecord
    },
    data() {
        return {
            giftcards: [],
            balance: 0,
            total: 0, //列表总条数
            pageSize: 10, //每页条数
            currentPage: 1, //当前页码
            listLoading: false,
            sels: [], //列表选中列   
            editForm: {
                id: "",
                cardNo: "",
                clientName: "",
                clientPhone: ""
            },
            editFormRules: {
                clientPhone: [{
                    required: true,
                    message: this.$t('giftcard.route.cardReport.editCardDialog.form.validClientPhone'),
                    trigger: 'blur'
                }]
            },
            editDialogFormVisible: false
        };
    },
    mounted() {
        this.getGiftcardsEvent();
    },
    methods: {
        showMainPage() {
            //显示预约页面
            this.$router.push({
                path: '/giftcard/index'
            });
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getGiftcardsEvent();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getGiftcardsEvent();
        },
        selsChange: function (sels) {
            this.sels = sels;
        },
        formatPayWay: function (row) {
            return row.payWay == 1 ? this.$t('giftcard.route.cardReport.table.paywayList.cash') : row.payWay == 2 ? this.$t('giftcard.route.cardReport.table.paywayList.creditCard') : this.$t('giftcard.route.cardReport.table.paywayList.unknown');
        },
        getGiftcardsEvent() {
            let para = {
                pageSize: this.pageSize,
                pageNum: this.currentPage
            };
            getShopGiftcards(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    this.total = res.data.total;
                    this.giftcards = res.data.list;
                    this.listLoading = false;
                }
            });
            getShopGiftcardBalance().then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    this.balance = res.data;
                }
            });
        },
        //表格中的【序号】列的值生成方式
        indexMethod(index) {
            return index + 1 + (this.currentPage - 1) * this.pageSize;
        },
        handleDelEnvent(index, row) {
            this.$confirm(this.$t('giftcard.route.cardReport.delCardDialog.content'), this.$t('giftcard.route.cardReport.delCardDialog.title'), {
                type: 'warning'
            }).then(() => {
                this.listLoading = true;
                let para = {
                    cardId: row.id
                };
                delGiftcard(para).then((res) => {
                    this.listLoading = false;
                    this.$message({
                        message: this.$t('giftcard.route.cardReport.delCardDialog.successMsg'),
                        type: 'success'
                    });
                    this.getGiftcardsEvent();
                });
            }).catch(() => {

            });
        },
        handleConsumeRecordEnvent(index, row) {
            this.$refs.giftcardPayrecord.showPage(row.id);
        },
        handleEditEnvent(index, row) {
            this.editDialogFormVisible = true;
            this.editForm.id = row.id;
            this.editForm.cardNo = row.cardNo;
            this.editForm.clientFirstName = row.clientFirstName;
            this.editForm.clientFamilyName = row.clientFamilyName;
            this.editForm.clientPhone = row.clientPhone;
        },
        closeEditFormDialog() {
            this.$refs.editForm.resetFields();
            this.editDialogFormVisible = false;
        },
        editCardEvent() {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    let para = Object.assign({}, this.editForm);
                    editGiftcard(para).then((res) => {
                        this.listLoading = false;
                        this.$message({
                            message: this.$t('giftcard.route.cardReport.editCardDialog.successMsg'),
                            type: 'success'
                        });
                        this.closeEditFormDialog();
                        this.getGiftcardsEvent();
                    });
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #012547;
    font-family: Helvetica, Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
}

.nav {
    display: flex;
    justify-content: Center;
    align-items: Center;
    //font-family: Helvetica, Tahoma, Arial, sans-serif;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    //font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
    font-size: 48px;
}

.userinfo {
    display: flex;
    justify-content: left;
    align-items: Center;
    text-align: right;
    padding-right: 35px;
    float: right;
    height: 60px;
}

.logo {
    display: flex;
    justify-content: left;
    align-items: Center;
    height: 60px;
    font-size: 26px;
    padding-left: 20px;
    padding-right: 20px;
}

.userCarousel {
    //background-image: linear-gradient( 135deg, #3C8CE7 10%, #00EAFF 100%);
    background-color: #409EFF;
    display: flex;
    justify-content: Center;
    align-items: Center;
    cursor: pointer;
}
</style>
